<template>
  <div class="orderItem">
    <a-row class="orderHead">
      <a-col span="1"
        ><a-checkbox :checked="getCheckStatus(order.id)" @change="$emit('chooseOrder', order)"></a-checkbox
      ></a-col>
      <a-col span="5">
        <a-tooltip>
          <template slot="title"> 双击复制 </template>
          <span @dblclick="copyText(order.order_no)">订单号：{{ order.order_no }}</span>
        </a-tooltip>
      </a-col>
      <a-col span="12">
        <a-tooltip v-if="order.mch_order_no" style="margin-right: 15px">
          <template slot="title"> 双击复制 </template>
          <span @dblclick="copyText(order.mch_order_no)">商家订单号：{{ order.mch_order_no }}</span>
        </a-tooltip>
        <a-tooltip v-if="userInfo.info.type === 'admin' && order.supplier_name">
          <template slot="title"> 双击复制 </template>
          <span @dblclick="copyText(order.supplier_name)">供货商：{{ order.supplier_name || '-' }}</span>
        </a-tooltip>
      </a-col>
    </a-row>
    <a-row type="flex" class="orderBody">
      <a-col span="1">
        <div class="open" v-if="order.goods_list && order.goods_list.length > 1" @click.stop="is_open = !is_open">
          <span v-if="is_open">-</span>
          <span v-else>+</span>
        </div>
      </a-col>
      <template v-for="(item, index) in list_th">
        <a-col :key="item.type" :span="item.span" v-if="item.type == 'name'">
          <div
            class="goodsInfo"
            v-for="(good, goodIndex) in is_open ? order.goods_list : [order.goods_list[0]]"
            :key="goodIndex"
          >
            <img :src="good.pic_url" alt="" />
            <div class="info">
              <a-tooltip style="width: 100%">
                <template slot="title"> {{ good.name }}</template>
                <span class="goodName">{{ good.name }}</span>
              </a-tooltip>
              <a-tooltip style="width: 100%" v-if="good.attr">
                <template slot="title">
                  {{
                    good.attr.attr_list
                      ? good.attr.attr_list
                          .map((item) => {
                            return item.attr_name
                          })
                          .join(' ')
                      : '规格:默认'
                  }}</template
                >
                <span class="attrName">{{
                  good.attr.attr_list
                    ? good.attr.attr_list
                        .map((item) => {
                          return item.attr_name
                        })
                        .join(' ')
                    : '规格:默认'
                }}</span>
              </a-tooltip>
            </div>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'count'">
          <div
            class="count"
            v-for="(good, goodIndex) in is_open ? order.goods_list : [order.goods_list[0]]"
            :key="goodIndex"
          >
            <span>￥{{ good.price }}</span>
            <span>×{{ good.num }}</span>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'discount'"> ￥0.00 </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'pay_price'">
          <div class="count">
            <span>￥{{ order.pay_price }}</span>
            <span style="color: rgba(0, 0, 0, 0.65)">(含快递:￥{{ order.express_price }})</span>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'send_type'">
          <a-tooltip
            overlayClassName="draw_overlay"
            :overlayStyle="{
              width: '250px',
            }"
          >
            <template slot="title">
              <div class="addressInfo">
                <h3>收货人</h3>
                <h4>姓名：{{ order.name }}</h4>
                <h4>手机：{{ order.mobile }}</h4>
                <h4>地址：{{ order.address }}</h4>
              </div>
            </template>

            <div class="count">
              <span>{{ order.name }}</span>
              <span>自主配送</span>
            </div>
          </a-tooltip>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'pay_time'">
          <p>{{ order.mch.name || '-' }}</p>
          <span> {{ order.pay_time > 0 ? $moment(order.pay_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'stbz_trans_status'">
          <div class="orderStatus">
            <div class="status">
              <span :style="{ backgroundColor: statusColor2 }"></span>
              <span>{{ orderStatus2 }}</span>
            </div>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'status'">
          <div class="orderStatus">
            <div class="status">
              <span :style="{ backgroundColor: statusColor }"></span>
              <span>{{ orderStatus }}</span>
            </div>
            <a-button
              v-if="userInfo.info.type === 'supplier'"
              type="link"
              size="small"
              @click="$router.push({ path: '/saas/supplierPurchaseGoods/trans/detail', query: { id: order.order_no } })"
              >详情</a-button
            >
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'action'">
          <template v-if="userInfo.info.type === 'supplier'">
            <a-button
              type="link"
              size="small"
              :disabled="!orderActions.length"
              v-if="orderActions.length"
              @click="clickAction(orderActions[0])"
              >{{ orderActions[0] | actionBtn }}</a-button
            >
            <a-button type="link" size="small" :disabled="!orderActions.length" v-else>详情</a-button>
            <a-divider type="vertical" style="margin: 0 1px" />
            <a-dropdown :disabled="orderActions.length < 2">
              <a-button type="link" size="small" :disabled="orderActions.length < 2">
                更多 <a-icon type="down"
              /></a-button>
              <a-menu slot="overlay">
                <a-menu-item
                  v-for="(action, actionIndex) in orderActions"
                  @click="clickAction(action)"
                  :key="actionIndex"
                  v-if="actionIndex >= 1"
                >
                  <a-button type="link" size="small">{{ action | actionBtn }}</a-button>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-col>
      </template>
    </a-row>
  </div>
</template>

<script>
import { orderPrint } from '@/api/order'

export default {
  props: {
    order: {
      type: Object,
      default: () => {
        return {}
      },
    },
    choosed: {
      type: Boolean,
      default: false,
    },
    list_th: {
      type: Array,
      default: () => {
        return []
      },
    },
    selectedRowKeys: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      // 是否展开多商品信息
      is_open: false,
    }
  },

  methods: {
    // 双击复制
    copyText(data) {
      if (!data) return
      this.$copyText(data)
        .then((e) => {
          this.$message.success('复制成功')
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('复制失败')
        })
    },
    // 点击按钮
    clickAction(type, order = null) {
      this.$emit('triggerAction', { type, order: this.order })
      // if (type === 'printer') {
      //   console.log(123);
      //   orderPrint({
      //     order_id: order.order_no,
      //     type: 1
      //   }).then(res => {
      //     const hide = this.$message.loading('提交中...', 0);
      //
      //     if (res.code !== 0) {
      //       this.$error({
      //         content: res.msg
      //       })
      //     } else {
      //       this.$message.success(res.msg)
      //     }
      //   })
      // } else if (type === 'deliver') {
      //   this.$emit('triggerAction', { type, order: this.order })
      // }
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.user
    },

    getCheckStatus() {
      return (val) => {
        return this.selectedRowKeys.findIndex((el) => el.id === val) !== -1
      }
    },

    statusColor() {
      let { status } = this.order
      if (status == 0) {
        return '#faad14'
      }

      if (status == -1) {
        return '#bfbfbf'
      }

      if (status == 1 || status == 2) {
        return '#65c817'
      }
    },

    orderStatus() {
      let { status } = this.order
      if (status == 0) {
        return '待处理'
      }

      if (status == 1) {
        return '已发货'
      }

      if (status == 2) {
        return '已完成'
      }

      if (status == -1) {
        return '已取消'
      }

      return '-'
    },

    statusColor2() {
      let { stbz_trans_status } = this.order
      if (stbz_trans_status === '0') {
        return '#faad14'
      }

      if (stbz_trans_status === '1') {
        return '#65c817'
      }
    },

    orderStatus2() {
      let { stbz_trans_status } = this.order
      if (stbz_trans_status == '1') {
        return '已转单'
      }

      if (stbz_trans_status == '0') {
        return '未转单'
      }
      return '-'
    },
    orderActions() {
      // 订单操作 cancle 取消  deliver 发货 agree 同意取消  refuse 拒绝取消订单 detail 详情
      let actions = []
      let status = this.order.status
      if (status == -1) {
        // 已取消
        actions = ['detail']
      }
      if (status == 0) {
        // 待发货
        actions = ['deliver', 'cancle', 'order_receipts_print']
        if (this.order.send_type === '0') {
          actions.splice(1, 1)
        }
        if (this.order.cancel_examine == 1) {
          // 取消申请中
          actions = ['agree', 'refuse', 'order_receipts_print']
        }
      }
      if (status == 1) {
        // 待收货
        // text = '已发货'
        actions = ['detail', 'order_receipts_print']
      }
      if (status == 2) {
        // 已完成
        // text = '已完成'
        actions = ['detail', 'order_receipts_print']
      }
      return actions
    },
  },
  filters: {
    actionBtn(val) {
      let text = ''
      switch (val) {
        case 'cancle':
          text = '取消'
          break
        case 'deliver':
          text = '发货'
          break
        case 'agree':
          text = '同意'
          break
        case 'refuse':
          text = '拒绝'
          break
        case 'detail':
          text = '详情'
          break
        case 'order_receipts_print':
          text = '小票打印'
          break
      }
      return text
    },
  },
}
</script>

<style lang="less" scoped>
.orderItem {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}
.orderHead {
  width: 100%;
  height: 54px;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}
.orderBody {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  .open {
    font-size: 20px;
    cursor: pointer;
  }
  .goodsInfo {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 17px;
    img {
      width: 48px;
      min-width: 48px;
      height: 48px;
      border-radius: 4px;
    }
    .info {
      flex: auto;
      display: flex;
      width: 0;
      flex-direction: column;
      margin-left: 24px;
      .goodName,
      .attrName {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
      }
      .goodName {
        color: rgba(0, 0, 0, 0.85);
      }
      .attrName {
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }
  .goodsInfo:last-child {
    margin-bottom: 0;
  }
  .count {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    text:nth-child(1) {
      margin-bottom: 10px;
    }
    margin-bottom: 15px;
  }
  .count:last-child {
    margin-bottom: 0;
  }

  .orderStatus {
    .status {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      span:nth-child(1) {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
}

/* .addressInfo {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #fff;

  h3,
  h4 {
    color: #fff;
  }
} */
</style>
